import React from "react";
import { Button, Badge, InputNumber, Popconfirm, Divider, Space } from "antd";
import type { ButtonProps, InputNumberProps } from "antd";
import { 
  ShoppingCartOutlined, 
  DeleteOutlined, 
  CloseOutlined,
  ArrowLeftOutlined,
  RightOutlined
} from "@ant-design/icons";

// 定义购物车商品类型
export interface CartItem {
  id: number;
  name: string;
  price: number;
  originalPrice: number;
  image: string;
  quantity: number;
}

interface CartPageProps {
  isMobile: boolean;
  setActiveTab: (tab: string) => void;
  cartItems: CartItem[];
  updateQuantity: (id: number, quantity: number) => void;
  removeFromCart: (id: number) => void;
  clearCart: () => void;
  onCheckout: () => void; // 添加结算回调
}

export default function CartPage({ 
  isMobile, 
  setActiveTab,
  cartItems,
  updateQuantity,
  removeFromCart,
  clearCart,
  onCheckout
}: CartPageProps) {
  // 计算总价
  const calculateTotal = () => {
    return cartItems.reduce(
      (total, item) => total + item.price * item.quantity, 0
    );
  };

  // 计算节省金额
  const calculateSavings = () => {
    return cartItems.reduce(
      (total, item) => total + (item.originalPrice - item.price) * item.quantity, 0
    );
  };

  return (
    <div style={{ 
      padding: "12px 0", 
      minHeight: "60vh",
      display: "flex",
      flexDirection: "column",
      height: "100%",
      position: "relative"
    }}>
      {cartItems.length === 0 ? (
        <div style={{ 
          display: "flex", 
          flexDirection: "column", 
          justifyContent: "center", 
          alignItems: "center", 
          height: "60vh"
        }}>
          <ShoppingCartOutlined style={{ fontSize: isMobile ? 48 : 64, color: "#bfbfbf" }} />
          <div style={{ fontSize: isMobile ? 14 : 16, color: "#8c8c8c", margin: "16px 0" }}>
            购物车还是空的
          </div>
          <Button 
            type="primary" 
            onClick={() => setActiveTab("home")} 
            size={isMobile ? "middle" : "large"}
            style={{ minWidth: 120 }}
          >
            去购物
          </Button>
        </div>
      ) : (
        <div style={{ 
          padding: isMobile ? "0 8px" : "0 16px",
          flex: 1,
          overflowY: "auto",
          paddingBottom: isMobile ? "100px" : "120px" // 为结算区域留出空间
        }}>
          {/* 购物车标题 */}
          <div style={{ 
            display: "flex", 
            justifyContent: "space-between", 
            alignItems: "center", 
            marginBottom: 16,
            position: "sticky",
            top: 0,
            background: "#fff",
            zIndex: 10,
            padding: "12px 0",
            borderBottom: "1px solid #f0f0f0"
          }}>
            <h2 style={{ margin: 0, fontSize: isMobile ? 18 : 20, fontWeight: 500 }}>购物车</h2>
            <Popconfirm
              title="确定要清空购物车吗?"
              onConfirm={clearCart}
              okText="确定"
              cancelText="取消"
              description="清空后无法恢复"
            >
              <Button 
                type="text" 
                danger 
                icon={<DeleteOutlined />}
                size="small"
              >
                清空购物车
              </Button>
            </Popconfirm>
          </div>
          
          {/* 商品列表 */}
          <div style={{ marginBottom: 24 }}>
            {cartItems.map(item => (
              <div 
                key={item.id} 
                style={{
                  display: "flex",
                  padding: "12px 0",
                  borderBottom: "1px solid #f0f0f0"
                }}
              >
                <div style={{
                  width: isMobile ? 80 : 100,
                  height: isMobile ? 80 : 100,
                  marginRight: 12,
                  background: "#f5f5f5",
                  borderRadius: 4,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0
                }}>
                  <img 
                    src={`/images/${item.image}`} 
                    alt={item.name}
                    style={{ 
                      maxWidth: "80%", 
                      maxHeight: "80%",
                      objectFit: "contain" 
                    }}
                  />
                </div>
                
                <div style={{ flex: 1 }}>
                  <div style={{ 
                    fontSize: isMobile ? 14 : 16, 
                    marginBottom: 6,
                    fontWeight: 500,
                    display: "-webkit-box",
                    WebkitBoxOrient: "vertical",
                    WebkitLineClamp: 2,
                    overflow: "hidden"
                  }}>
                    {item.name}
                  </div>
                  
                  <div style={{ 
                    display: "flex", 
                    justifyContent: "space-between", 
                    alignItems: "center",
                    marginBottom: 8
                  }}>
                    <div>
                      <span style={{ 
                        fontSize: isMobile ? 15 : 16, 
                        color: "#ff4d4f", 
                        fontWeight: "bold" 
                      }}>
                        ¥{item.price}
                      </span>
                      <span style={{ 
                        fontSize: isMobile ? 11 : 12, 
                        color: "#999", 
                        textDecoration: "line-through",
                        marginLeft: 6
                      }}>
                        ¥{item.originalPrice}
                      </span>
                    </div>
                    
                    <Button 
                      type="text" 
                      danger 
                      icon={<CloseOutlined />} 
                      size="small"
                      onClick={() => removeFromCart(item.id)}
                    >
                      删除
                    </Button>
                  </div>
                  
                  <div style={{ 
                    display: "flex", 
                    justifyContent: "space-between", 
                    alignItems: "center"
                  }}>
                    <span style={{ fontSize: isMobile ? 12 : 13, color: "#666" }}>
                      数量:
                    </span>
                    <InputNumber
                      min={1}
                      max={99}
                      value={item.quantity}
                      onChange={(value: number | null) => updateQuantity(item.id, value || 1)}
                      size={isMobile ? "small" : "middle"}
                      style={{ width: isMobile ? 90 : 100 }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
      
      {/* 固定在底部的结算区域 */}
      {cartItems.length > 0 && (
        <div style={{ 
          position: "fixed",
          bottom: isMobile ? 56 : 60, // 在底部导航栏上方
          left: 0,
          right: 0,
          background: "#fff",
          padding: "16px",
          borderTop: "1px solid #f0f0f0",
          boxShadow: "0 -2px 10px rgba(0, 0, 0, 0.05)",
          zIndex: 100,
          display: "flex",
          flexDirection: "column",
          gap: "12px"
        }}>
          <div style={{ 
            display: "flex", 
            justifyContent: "space-between", 
            alignItems: "center"
          }}>
            <div style={{ fontSize: isMobile ? 14 : 16 }}>
              共 <span style={{ fontWeight: "bold", color: "#ff4d4f" }}>
                {cartItems.reduce((total, item) => total + item.quantity, 0)}
              </span> 件商品
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: isMobile ? 14 : 16 }}>
                合计: <span style={{ fontSize: isMobile ? 18 : 20, color: "#ff4d4f", fontWeight: "bold" }}>
                  ¥{calculateTotal().toFixed(2)}
                </span>
              </div>
              <div style={{ fontSize: isMobile ? 12 : 13, color: "#999" }}>
                已省: ¥{calculateSavings().toFixed(2)}
              </div>
            </div>
          </div>
          
          <div style={{ display: "flex", gap: 12 }}>
            <Button 
              style={{ 
                flex: 1,
                height: isMobile ? 40 : 48,
                fontSize: isMobile ? 14 : 16,
                borderColor: "#1890ff",
                color: "#1890ff"
              }} 
              icon={<ArrowLeftOutlined />}
              onClick={() => setActiveTab("home")}
            >
              继续购物
            </Button>
            <Button 
              type="primary" 
              danger 
              style={{ 
                flex: 2,
                height: isMobile ? 40 : 48,
                fontSize: isMobile ? 14 : 16,
                fontWeight: "bold"
              }}
              onClick={onCheckout}
            >
              去结算
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}